<template>
  <div class="task-collect">
    <el-row>
      <el-col :span="22" :offset="1" v-if="TaskList.length">
        <el-card
          class="planList"
          v-for="(item, index) in TaskList"
          :key="index"
        >

        <h1>
                    <el-button v-if="currentTask.value.id === item.id" type="success"  :loading="loading" size="mini" @click="handleCurrentTask(item)">当前</el-button>
    
                    <el-button v-else type="primary" size="mini"  :loading="loading" @click="handleCurrentTask(item)">选择</el-button>
                    <span class="title" v-if="currentTask.value.id === item.id" style="
                padding: 0;
                font-size: 18px;
                margin-top: 5px;
                font-weight: bold;
                display: block;
                color: red;
              ">{{ item.planName }}</span>
                    <span class="title" v-else>{{ item.planName }}</span>
                </h1>
          <ul>
            <li>
              <strong>任务开始时间：</strong>
              <time :datetime="item.planStartTime">{{
                item.planStartTime | formatDate
              }}</time>
            </li>
            <li>
              <strong>任务结束时间：</strong>
              <time :datetime="item.planEndTime">{{
                item.planEndTime | formatDate
              }}</time>
            </li>
            <li class="flex">
              <viewCollectionArea class="num"  :id="item.id"
                >采集区域</viewCollectionArea
              >
              <ViewCollectionRequirements
              class="num"
                :planrequire="item.planRequire"
                >采集要求</ViewCollectionRequirements
              >
              <TaskPerformance class="num" :planId="item.id">执行情况</TaskPerformance>
              <DataInventory class="num" :item="item">数据清单</DataInventory>
            </li>
            <li class="flex card">
              <div class="num"><strong>图斑总数：</strong><span>{{item.collectTaskLandRs[0].total}}</span></div>
              <div class="num"><strong>已审核：</strong><span>{{item.collectTaskLandRs[0].auditStatusNum}}</span></div>
              <div class="num"><strong>已采集：</strong><span>{{item.collectTaskLandRs[0].collectNum}}</span></div>
              <div class="num"><strong>未采集：</strong><span>{{item.collectTaskLandRs[0].noCollectNum}}</span></div>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="22" :offset="1" v-else>
        <el-card 
          class="planList"
          style="padding:15px 0"
        ><i class="el-icon-s-opportunity" style="color:green"></i> {{activeName === 'first'?'您当前没有任何的任务':"当前没有到期任务"}}  </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import MapLogic from "@/views/Map/CreateMap/mixin/MapLogic";
export default {
  // mixins:[MapLogic],
  name: "TaskCollect",
  props:{
    TaskList:{
      type:Array,
      default:function(){
        return []
      }
    },
    activeName:{
      type:String,
      default:'null'
    }
  },
  data() {
    return {
      userInfo:{},
      currentTaskButton: "当前任务",
      loading:false
    };
  },
  components: {
    DataInventory: () => import("./DataInventory/DataInventory.vue"),
    TaskPerformance: () => import("./TaskPerformance/TaskPerformance.vue"),
    viewCollectionArea: () =>
      import("./viewCollectionArea/viewCollectionArea.vue"),
    ViewCollectionRequirements: () =>
      import("./ViewCollectionRequirements/ViewCollectionRequirements.vue"),
  },
  // created() {
  //   this.$axios
  //     .get("task/task/queryMyPlan", {
  //       params: {
  //         pageNumber: 1,
  //         pageSize: 100,
  //       },
  //     })
  //     .then((res) => {
  //       this.TaskList = res.data?.list;
  //     });
  // },
  computed: {
    ...mapState({
      currentTask: (state) => {
        return state.currentTask.Task;
      },
    }),
  },
  watch:{
    TaskList(){
      // 默认选中第一个
      let userInfo = {}
      if(localStorage.getItem('userInfo')){
        userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.userInfo = userInfo;
      }
      if(localStorage.getItem('currentTask/setCurrentTask')){
        this.loading=false
      }else{
        this.handleCurrentTask(this.TaskList[0])
      }
    }
  },
  methods: {
    handleOutCurrenttTask() {
            this.$store.dispatch("currentTask/setAsyncCurrentTask", {
                data: {},
                value: {},
            }).then((res)=>{
                this.$emit("filterMapSuccess", {
                    title: "townsValue",
                    value: "全部"
                });
            })
        },
    handleCurrentTask(item) {
      // let userInfo = {}
      // if(localStorage.getItem('userInfo')){
      //   userInfo = JSON.parse(localStorage.getItem('userInfo'))
      //   this.userInfo = userInfo;
      // }
      // if(userInfo.userLevel === 3){
      //    this.$message({
      //       type:"warning",
      //       message:"您是区管理员，不能选择任务",
      //       duration:2000
      //    })
      //    return false
      // }

      this.loading=true
      
      this.$axios
        .get("task/task/getAListOfPlans?planInfo.Id=" + item.id)
        .then((res) => {
          this.$store.commit("currentTask/setCurrentTask", {
            data: res.data.list[0],
            value: item,
          });
          localStorage.setItem(
            "currentTask/setCurrentTask",
            JSON.stringify({
              data: res.data.list[0],
              value: item,
            })
          );
          this.$emit("filterMapSuccess", {
            data: res.data.list[0],
            value: item,
          });
          this.loading=false
        });
    },

  },
};
</script>

<style lang="scss">
.task-collect {
  .planList {
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 0px;
    h1{
      padding:15px 0;
    }
    .title {
      padding: 0 10px;
      font-size: 18px;
      text-overflow: ellipsis;
      height: 25px;
      line-height: 25px;
      overflow: hidden;
      width: 100%;
    }

    .el-card__body {
      padding: 0px 10px;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        line-height: 25px;
      }
      .card {
        background: rgba(100, 100, 100, 0);
        border-radius: 5px;
        padding: 0px 5px;
      }
      .flex {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        > .num {
          box-sizing: border-box;
          margin: 1px 0;
          display: block;
          width: 50%;
          strong {
            display: inline-block;
            width: 80px;
            text-align: right;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
